<template>
     <view class="gift-purchase">
 
      
      <view>
        <view class="header">
        <view><uni-status-bar></uni-status-bar></view>
  
        <view class="search-box flex-cn">
          <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
            <view
              style="width: 100rpx; text-align: center"
              class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
            >
            </view>
          </view>
  
          <view
              style="
                  height: 80rpx;
                  line-height: 80rpx;
                  font-size: 36rpx;
                  font-family: '.PingFang SC, PingFang SC';
                  display: flex;
                  justify-content: center;
                  align-content: center;
                  flex: 1;
                  color: #000;
                  font-weight: 600;
              " 
              >
              礼品卡订单
              </view>
              <view style="width: 320rpx; flex: 1"></view>
          </view>   
      </view> 
      
        <view  style="margin-top: 170rpx;">
            <scroll-view class="scroll-view" style="height: 800px;"  scroll-y="true"  :show-scrollbar="false"   refresher-background="transparent" @scrolltolower="getOrderList"    
            :refresher-threshold="38"  @refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh">
                
                        <!-- @tap.stop="toOrderDetail(item)" -->
					<view class="orderList" v-for="(item, index) in orderList" :key="index">
						<view class="order-title flex-cn">
							<view class="store-info flex-cn">
						
                                <view class="store-name text-ellipsis font_status_msg"  
                                    :style="{ color: statusColor(item.order_status_msg) }"
                                >{{ item.order_status_msg }}</view>
							</view>
							<!-- <view class="order-state flex-cn">
								<text class="qh-rt-single qh-rt-you order-state-right-icon"></text>
							</view> -->
						</view>
						<view class="orderList-box">
							<view class="order-body">
								<view class="order-img">
                                    <scroll-view class="home_icon" scroll-x="true" style="white-space: nowrap">
                                        <view v-for="(val, i) in item.list" class="min_cion" :key="i">
                                            <view style="display: flex;align-items: center;">
                                                <image class="el-img"  mode="aspectFit"   src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/6630a70c2d6934381.png"  />
                                                
                                                <view style="display: flex; flex-direction: column; align-items: flex-start;margin-left: 10rpx;">
                                                    <view style="font-size: 24rpx;font-weight:700;">{{ item.title }}</view>
                                                    <view style="font-size: 24rpx;font-weight: bold;">面额：{{val.money}}元</view>
                                                    <view style="font-size: 24rpx;font-weight: bold;">数量：×{{val.card_count}}</view>
                                                </view>
                                                
                                            </view>
                                        </view>
                                    </scroll-view>
								</view>

								<view class="order-info">
									<view>
										<view  style="margin-top: 10rpx;">
											<text style="font-size: 24rpx;font-weight:700;">共{{ item.list.length }}  件 实付: ￥{{ item.trade_amount }}</text>
											<!-- <text cacatchlongtap="copy" :data-order_no="item.order_no">{{item.order_no}}</text> -->
										</view>
									</view>
								</view>

							</view>
						</view>
						<view class="order-bottom">
							<view class="order-btn">
								<view class="orderqrcode">
									<view class="bnt-comm btn-green" @tap.stop="toPurchase()">再次购买</view> 
                                    <!-- v-if="item.gift_card_class == 1   && item.order_state == 3" -->
									<view class="bnt-comm btn-green"   v-if="item.gift_card_class == 1   && item.order_state == 3" @tap.stop="ConfirmReceipt(item.pay_order_id)">确认收货</view> 
									<view class="bnt-comm btn-green" v-if="item.gift_card_class == 1 && item.order_status_msg !='已取消' " @tap.stop="ViewLogistics(item.pay_order_id)">查看物流</view> 

								</view>
							</view>
						</view>
					</view>
                    
                    <view class="flex-cn-cn" style="width: 100%;height: 60rpx;">
                        <view v-if=" this.orderList === 0" >
                            <view  class="flex-cn-cn " style="width: 100%;margin-top: 300rpx;">
                                 <qh-empty-data 
                                    text="暂无数据~" 
                                    width="238rpx" 
                                    height="216rpx" 
                                    :custom-style="{ marginTop: '40rpx' }"
                                    ></qh-empty-data>
                            </view>
                        </view>
                        <view v-if="canLoad && isLoading" class="bottom-message flex-cn-cn">加载中...</view>
								<view v-if="firstLoad && orderList.length != 0" class="flex-cn-cn bottom-message" >
                                    <view class="line"></view>
                                    <text class="mar_l_10 mar_r_10">没有更多了</text>
                                    <view class="line"></view>
                                </view>
                    </view>

                    <view class="limit_bottom"></view>
			</scroll-view>
		</view>
      </view>


    </view> 

</template>

<script>
export default {
    data() {
        return {
            page:1,
            limit:10,
            showLoading: false,
            orderList:[],
            isRefresh: false,
			  isLoading: false,
			  canLoad: true,
              firstLoad:false,
              order_id: null, // 
        }
    },

    onLoad(){
        this.getOrderList()
    },

    methods:{
        Refresh(){
            this.isLoading = false;
            this.canLoad = true;
            this.page = 1
            this.getOrderList();
            this.$forceUpdate()
        },

        //确认收货
        async  ConfirmReceipt(order_id){
         // 手动更新 orderList
            uni.showModal({
					content: '是否确认收货?',
					showCancel: true,
					success: async (res) => {
						if (!res.confirm) return;
						const {
							status,
							message
						} = await this.$request('/SmallProgramApi/ShiFu/setGiftCardOrderStatus',   { store_id: this.$store.mallStoreId  , order_id,})
                        if (status == 1) {
							uni.showToast({
								title: message,
								icon: 'success',
								duration: 1500,
								mask: false
							});
                            this.Refresh()
						} else {
							uni.showToast({
								title: message,
								icon: 'none',
								duration: 1500,
								mask: false
							});
						}
					}
				});
                
        },
        //查看物流
        async ViewLogistics(pay_order_id){
            uni.navigateTo({
					url: '/pages/mer/tabbar/logistics/logistics?id=' + pay_order_id
				})

            // const { status, data, message } = await this.$request(
            //         '/SmallProgramApi/ShiFu/seeGiftCardLogistics',{ store_id: this.$store.mallStoreId ,order_id, }
            //     );
        },
        backHome() {
            uni.navigateBack();
        },
        statusColor(val) {
            switch (val) {
                case '已取消': return 'red';
                case '已发货': return 'black';
                case '未发货': return 'grey';
                case '已完成': return '#FFB73F';
                default: return 'black';
            }
        },



    //获取商品数据
        getOrderList() {
            return new Promise(async (resolve) => {
                if (this.isLoading || !this.canLoad) return resolve(false);
                    this.isLoading = true;
                    let param = {
                        page: this.page,
                        limit: this.limit,
                        merchant_id: 1,
                    }
                const { status, data, message } = await this.$request(
                    'SmallProgramApi/ShiFu/getGiftCardOrder', param
                );
            
                if (status != 1)
                return (
                    uni.showToast({
                    title: message,
                    icon: "none",
                    }) && resolve(false)
                );

                if (this.page == 1) {
                this.orderList = data;
                } else {
                this.orderList.push.apply(this.orderList, data);
                }   

                this.page++;
                // this.canLoad = data.length === this.limit;
                this.firstLoad = data.length < this.limit ? true : false;
                this.canLoad = data.length < this.limit ? false : true;
                this.$nextTick(() => {
                    this.isLoading = false;
                    this.isRefresh = false; // 如果适用
                    resolve(true);
                });
            });
        },
        getTotalPrice(list) {
            return list.reduce((total, val) => {
        const count = Number(val.card_count);
        return total + (isNaN(count) ? 0 : count);
    }, 0);

        },
        // 拉动刷新
        async pullDownRefresh () {
            this.isRefresh = true;
            this.canLoad = true;
            await this.getOrderList();
        },
        toPurchase(){
            uni.navigateTo({
                url: '/pages/mer/tabbar/gift_purchase/gift_purchase' 
            });
        }

    }
    
}

</script>

<style>
	@import "./orderCard.css";
</style>
<style scoped lang="scss">

.limit_bottom{
    padding-bottom: env(safe-area-inset-bottom);
}

.min_cion {
      display: inline-block;
    //   width: 130rpx;
      height: 120rpx;
      text-align: center;
      margin-top: 20rpx;

      image {
        width: 150rpx;
        height: 100rpx;
      }
    }
    .gift-purchase {
        height: 100vh; 
        overflow-y: auto; 
        width: 100%;
        background-color: #F0F2EE;
        padding-bottom: 30rpx;
    }

    .header{
        position: fixed;
        top:0rpx;
        z-index: 99;
        background-color: #fff;
    }
    .loading-indicator {
  text-align: center;
  padding: 10rpx;
}

.bottom-message {
		color: #ccc;
		font-size: 24rpx;
		// background-color: #fff;
		width: 100%;
		padding: 10rpx 0;
	}

	.line {
		width: 40%;
		height: 1px;
		background-color: #ccc;
	}
    .font_icon{
  font-size: 24rpx;
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
  font-weight: bold;
}

.font_status_msg{
    height: 55rpx;display: flex;align-items: center;font-weight: bold;
}
</style>